<template>
  <div class="teaCourseContainer">
    <div class="searchBox">
      <div class="search">
        <span>工号</span>
        <el-input v-model="teacherId" size="medium" class="searchInput"></el-input>
      </div>
      <div class="search">
        <span>课程号</span>
        <el-input v-model="courseId" size="medium" class="searchInput"></el-input>
      </div>
      <div class="search">
        <span>课程名称</span>
        <el-input v-model="courseName" size="medium" class="searchInput"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px;" @click="getList('search')">搜索</el-button>
    </div>
    <BasicTablePagination @handler="tableHandler" :column="topColumn" :data="topData" :pagination="topPagination" @sizeChange="topSizeChange" @numChange="topNumChange" :height="300"></BasicTablePagination>
    <div style="margin-top: 50px;">
      <BasicTablePagination :column="botColumn" :data="botData" :pagination="botPagination" @sizeChange="botSizeChange" @numChange="botNumChange" :height="300"></BasicTablePagination>
    </div>
  </div>
</template>

<script>
import BasicTablePagination from '@/components/BasicTablePagination/BasicTablePagination'
import { getTeaCourse, getCourseStu } from '@/api/courseManage'
import { topTableColumn, botTableColumn } from '@/constants/teaCourseTable'

export default {
  name: "index",
  components: {
    BasicTablePagination
  },
  data() {
    return {
      topColumn: topTableColumn,
      topData: [
        {
          "courseId": 191001,
          "teacherId": "20020108",
          "courseName": "地理信息系统",
          "credit": 2.0,
          "courseAttribute": "选修",
          "courseTime": "周一1-2节",
          "courseLocation": "西配203",
          "name": "蔡峻枫"
        }
      ],
      topPagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      botColumn: botTableColumn,
      botData: [],
      botPagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      teacherId: '',
      courseId: '',
      courseName: '',
      tempData: ''
    }
  },
  methods: {
    tableHandler(val) {
      let { type, data } = val
      switch (type) {
        case 'rowClick':
          this.getStuList(data)
          break
        default:
          break
      }
    },
    topSizeChange(val) {
      this.topPagination.pageSize = val
      this.getList('reload')
    },
    topNumChange(val) {
      this.topPagination.pageNum = val
      this.getList('reload')
    },
    botSizeChange(val) {
      this.botPagination.pageSize = val
      this.getStuList(this.tempData)
    },
    botNumChange(val) {
      this.botPagination.pageNum = val
      this.getStuList(this.tempData)
    },
    async getList(val) {
      const params = {
        pageNum: this.topPagination.pageNum,
        pageSize: this.topPagination.pageSize,
        teacherId: this.teacherId,
        courseId: this.courseId,
        courseName: this.courseName
      }
      if (val == 'search') {
        params.pageNum = 1
        params.pageSize = 10
      }
      const res = await getTeaCourse(params)
      if (res.success == true) {
        this.topData = res.data
	  this.topPagination.total = res.total
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    async getStuList(val) {
      this.tempData = val
      console.log(val.courseId)
      const res = await getCourseStu({
        pageNum: this.botPagination.pageNum,
        pageSize: this.botPagination.pageSize
      }, val.courseId)
      if (res.success == true) {
        this.botData = res.data
        this.botPagination.total = res.total
      } else {
        this.$message.error(res.errorMsg)
      }
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="sass">
.teaCourseContainer
  padding: 20px
  .searchBox
    display: flex
    align-items: center
    justify-content: flex-end
    margin-bottom: 20px
    .search
      display: inline-flex
      align-items: center
      justify-content: center
      margin-right: 10px
      span
        width: 80px
      .searchInput
        width: 150px
</style>
